<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>NiiVue</title>
    <link rel="stylesheet" href="niivue.css" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <label for="fiberRadius">Radius</label>
      <input
        type="range"
        min="0"
        max="20"
        value="5"
        class="slider"
        id="fiberRadius"
      />
      <label for="renderMode">Rendering</label>
      <select id="renderMode">
        <option value="-1">slices</option>
        <option value="0" selected>matte</option>
        <option value="1.0">shiny</option>
      </select>
      <button id="about">About</button>
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="status">Regions: </label>
    </footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js";
      fiberRadius.oninput = function () {
        nv1.setMeshProperty(nv1.meshes[0].id, "fiberRadius", this.value * 0.1)
        nv1.updateGLVolume()
      }
      about.onclick = function () {
        window.alert("Simplified population-based tract connectome (PMID: 35995773)")
      }
      var volumeList1 = [{ url: "../images/mni152.nii.gz"}]
      let defaults = {
        backColor: [0.1, 0.1, 0.2, 1],
        show3Dcrosshair: true,
      }
      renderMode.onchange = function () {
        nv1.setVolumeRenderIllumination(parseFloat(this.value))
      };
      var nv1 = new niivue.Niivue(defaults)
      await nv1.attachToCanvas(gl1)
      nv1.opts.dragMode = nv1.dragModes.pan
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
      nv1.opts.yoke3Dto2DZoom = true
      await nv1.loadVolumes(volumeList1)
      await nv1.loadMeshes([{ url: "../images/yeh2022.trx"}])
      let cmapEl = document.getElementById("status")
      for (let i = 0; i < nv1.meshes[0].dpg.length; i++) {
        let btn = document.createElement("button")
        btn.innerHTML = nv1.meshes[0].dpg[i].id
        btn.onclick = function () {
          let cmap = {
                R: [192],
                G: [192],
                B: [0],
                I: [i+0],
          }
          nv1.setMeshProperty(nv1.meshes[0].id, "fiberGroupColormap", cmap)
        }
        cmapEl.appendChild(btn)
      }
      nv1.setMeshProperty(nv1.meshes[0].id, "fiberGroupColormap", {R: [192],G: [192], B: [0], I: [1]})
      nv1.setMeshProperty(nv1.meshes[0].id, "fiberRadius", 0.5)
      nv1.setMeshShader(nv1.meshes[0].id, "diffuse")
      nv1.setSelectionBoxColor([0, 1, 0, 0.5])
      nv1.setClipPlane([-0.2, 0, 120])
      nv1.resizeListener()
    </script>
  </body>
</html>
